feather-icons
Advanced tools
Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and readability.
Basic Usage
This code demonstrates how to import the feather-icons package and use it to generate the SVG markup for a 'camera' icon.
const feather = require('feather-icons');
const icon = feather.icons['camera'].toSvg();
console.log(icon);Customizing Icons
This code shows how to customize the SVG output by adding custom classes and attributes such as 'stroke-width'.
const feather = require('feather-icons');
const icon = feather.icons['camera'].toSvg({ class: 'custom-class', 'stroke-width': 2 });
console.log(icon);Using with HTML
This example demonstrates how to use feather-icons directly in an HTML file. The `feather.replace()` method replaces all `<i>` tags with the corresponding SVG icons.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body>
<i data-feather="camera"></i>
<script>
feather.replace();
</script>
</body>
</html>Font Awesome is a popular icon toolkit that provides a wide range of icons. It offers more icons than feather-icons and includes both free and pro versions. Font Awesome icons are generally more detailed and come in different styles such as solid, regular, and light.
Material Icons are a set of icons designed by Google and are part of the Material Design guidelines. They are widely used in web and mobile applications and offer a consistent look and feel. Material Icons are more comprehensive in terms of the number of icons available compared to feather-icons.
Heroicons is a set of free, MIT-licensed high-quality SVG icons for you to use in your web projects. They are designed by the makers of Tailwind CSS and offer both outline and solid styles. Heroicons are similar to feather-icons in terms of simplicity and design philosophy.
Feather is a collection of simply beautiful open-source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility.
npm install feather-icons
Start with this CodePen Template to begin prototyping with Feather in the browser.
Or copy and paste the following code snippet into a blank html file.
<!DOCTYPE html>
<html lang="en">
<title></title>
<script src="https://unpkg.com/feather-icons"></script>
<body>
<!-- example icon -->
<i data-feather="circle"></i>
<script>
feather.replace();
</script>
</body>
</html>
At its core, Feather is a collection of SVG files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g. img, background-image, inline, object, embed, iframe). Here's a helpful article detailing the many ways SVGs can be used on the web: SVG on the Web – Implementation Options
The following are additional ways you can use Feather.
[!NOTE] If you intend to use Feather with a CDN, you can skip this installation step.
Install with npm.
npm install feather-icons --save
Or just copy feather.js or feather.min.js into your project directory. You don't need both feather.js and feather.min.js.
Include feather.js or feather.min.js with a <script> tag:
<script src="path/to/dist/feather.js"></script>
[!NOTE] >
feather.jsandfeather.min.jsare located in thedistdirectory of the npm package.
Or load the script from a CDN provider:
<!-- choose one -->
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
After including the script, feather will be available as a global variable.
To use an icon on your page, add a data-feather attribute with the icon name to an element:
<i data-feather="circle"></i>
See the complete list of icons at feathericons.com.
Call the feather.replace() method:
<script>
feather.replace();
</script>
All elements that have a data-feather attribute will be replaced with SVG markup corresponding to their data-feather attribute value. See the API Reference for more information about feather.replace().
Install with npm:
npm install feather-icons --save
const feather = require('feather-icons');
feather.icons.x;
// {
// name: 'x',
// contents: '<line ... /><line ... />`,
// tags: ['cancel', 'close', 'delete', 'remove'],
// attrs: {
// class: 'feather feather-x',
// xmlns: 'http://www.w3.org/2000/svg',
// width: 24,
// height: 24,
// viewBox: '0 0 24 24',
// fill: 'none',
// stroke: 'currentColor',
// 'stroke-width': 2,
// 'stroke-linecap': 'round',
// 'stroke-linejoin': 'round',
// },
// toSvg: [Function],
// }
feather.icons.x.toSvg();
// <svg class="feather feather-x" ...><line ... /><line ... /></svg>
feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' });
// <svg class="feather feather-x foo bar" stroke-width="1" color="red" ...><line ... /><line ... /></svg>
See the API Reference for more information about the available properties and methods of the feather object.
[!NOTE] If you intend to use Feather with a CDN, you can skip this installation step.
Install with npm.
npm install feather-icons --save
Or just copy feather-sprite.svg into your project directory.
Include an icon on your page with the following markup:
<svg
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<use href="path/to/feather-sprite.svg#circle" />
</svg>
[!NOTE] >
circlein the above example can be replaced with any valid icon name. See the complete list of icon names at feathericons.com.
However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons:
.feather {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
<svg class="feather">
<use href="path/to/dist/feather-sprite.svg#circle" />
</svg>
Feather is available as a Figma component library. To use the components, log in to your Figma account and duplicate the file to your drafts.
feather.iconsAn object with data about every icon.
feather.icons.x;
// {
// name: 'x',
// contents: '<line ... /><line ... />',
// tags: ['cancel', 'close', 'delete', 'remove'],
// attrs: {
// class: 'feather feather-x',
// xmlns: 'http://www.w3.org/2000/svg',
// width: 24,
// height: 24,
// viewBox: '0 0 24 24',
// fill: 'none',
// stroke: 'currentColor',
// 'stroke-width': 2,
// 'stroke-linecap': 'round',
// 'stroke-linejoin': 'round',
// },
// toSvg: [Function],
// }
feather.icons.x.toString();
// '<line ... /><line ... />'
[!NOTE] >
xin the above example can be replaced with any valid icon name. See the complete list of icon names at feathericons.com. Icons with multi-word names (e.g.arrow-right) cannot be accessed using dot notation (e.g.feather.icons.x). Instead, use bracket notation (e.g.feather.icons['arrow-right']).
feather.icons[name].toSvg([attrs])Returns an SVG string.
| Name | Type | Description |
|---|---|---|
attrs (optional) | Object | Key-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object. |
[!NOTE] You might find these SVG attributes helpful for manipulating icons:
feather.icons.circle.toSvg();
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.icons.circle.toSvg({ 'stroke-width': 1 });
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.icons.circle.toSvg({ class: 'foo bar' });
// '<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.replace([attrs])Replaces all elements that have a data-feather attribute with SVG markup corresponding to the element's data-feather attribute value.
| Name | Type | Description |
|---|---|---|
attrs (optional) | Object | Key-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object. |
[!IMPORTANT] >
feather.replace()only works in a browser environment.
Simple usage:
<i data-feather="circle"></i>
<!--
<i> will be replaced with:
<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->
<script>
feather.replace();
</script>
You can pass feather.replace() an attrs object:
<i data-feather="circle"></i>
<!--
<i> will be replaced with:
<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->
<script>
feather.replace({ class: 'foo bar', 'stroke-width': 1 });
</script>
All attributes on the placeholder element (i.e. <i>) will be copied to the <svg> tag:
<i data-feather="circle" id="my-circle" class="foo bar" stroke-width="1"></i>
<!--
<i> will be replaced with:
<svg id="my-circle" class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->
<script>
feather.replace();
</script>
feather.toSvg(name, [attrs]) (DEPRECATED)[!WARNING] >
feather.toSvg()is deprecated. Please usefeather.icons[name].toSvg()instead.
Returns an SVG string.
| Name | Type | Description |
|---|---|---|
name | string | Icon name |
attrs (optional) | Object | Key-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object. |
feather.toSvg('circle');
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.toSvg('circle', { 'stroke-width': 1 });
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.toSvg('circle', { class: 'foo bar' });
// '<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
For more info on how to contribute please see the contribution guidelines.
Caught a mistake or want to contribute to the documentation? Edit this page on Github
Feather is licensed under the MIT License.
FAQs
Simply beautiful open source icons
We found that feather-icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.